<template>
  <div class="fxBox">
    <div class="fxBox__top">
      <el-radio-group v-model="chooseRadio" @change="radioCheck">
        <el-radio label="noUse">不使用会员价</el-radio>
        <el-radio label="amount">固定金额</el-radio>
        <el-radio label="percent">百分比</el-radio>
      </el-radio-group>
      <div class="fxBox__top--tip">
        设置会员价后使用该商品会员价，不使用统一会员价 (
        <span style="color: #e14229"
          >注: 高等级会员优惠力度应大于低等级会员</span
        >)
      </div>
    </div>
    <div
      class="fxBox__list"
      v-if="chooseRadio != 'noUse'"
      :style="{
        height: memberList.length > 1 ? '400px' : '140px',
      }"
    >
      <div
        class="fxBox__list--firLine"
        :style="{ width: vipList.length > 3 ? '' : '100%' }"
      >
        <div class="vipItem" v-if="memberList.length > 1">规格值</div>
        <div class="vipItem">实售价</div>
        <div class="vipItem">指导价</div>
        <div
          v-for="(item, index) in vipList"
          :key="index"
          style="width: 122px; margin: 0px 15px"
        >
          {{ item.memberLevelName }}
        </div>
      </div>
      <div
        class="fxBox__list--skuLine"
        :style="{
          height: memberList.length > 4 ? '273px' : '',
          width: vipList.length > 3 ? '' : '100%',
        }"
      >
        <div
          v-for="(item, index) in memberList"
          :key="index"
          class="skuLine"
          :style="{
            width: vipList.length > 3 ? '' : '100%',
            borderBottom: memberList.length > 1 ? '1px solid #ebedf1' : 'none',
          }"
        >
          <div class="skuLine__name" v-if="memberList.length > 1">
            {{ item.specs }}
          </div>
          <div class="skuLine__center" style="width: 70px">
            ￥{{ item.price }}
          </div>
          <div class="skuLine__center" style="width: 180px">
            ￥{{ item.originalPrice }}
          </div>
          <div v-for="(v, i) in item.vipList" :key="i" class="vipLine">
            <el-input-number
              :min="0"
              :controls="false"
              v-model="v.memberPrice"
              style="width: 120px; margin: 0px 10px"
              @blur="validPrice($event, index, i)"
            >
              <div slot="append">
                {{ chooseRadio === "amount" ? "元" : "%" }}
              </div>
            </el-input-number>
          </div>
        </div>
      </div>
      <div
        class="fxBox__list--firLine"
        v-if="memberList.length > 1"
        style="
          padding-right: 20px;
          margin-top: 20px;
          position: absolute;
          left: 0px;
          bottom: 0px;
        "
        :style="{
          width: vipList.length > 3 ? '' : '100%',
          paddingRight: vipList.length > 3 ? '60px' : '20px',
        }"
      >
        <div style="display: flex; width: 353px; align-items: center">
          <div style="margin-right: 10px">批量设置</div>
          <el-switch
            v-model="setValue"
            active-color="#006EFF"
            inactive-color="#D7D7D7"
            @change="control"
          ></el-switch>
        </div>
        <div v-for="(item, index) in vipList" :key="index" class="vipLine">
          <el-input-number
            :min="0"
            :controls="false"
            v-model="item.memberPrice"
            style="width: 125px; margin: 0px 13px"
            @blur="setByAll($event, index)"
          >
            <div slot="append">{{ chooseRadio === "amount" ? "元" : "%" }}</div>
          </el-input-number>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
//#endregion
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
import { getAllTagsVipLevel } from "@/api/customer/customer";

@Component
export default class MemberSet extends Vue {
  @Prop({
    type: String,
    default() {
      return "";
    },
  })
  tagType: any;

  @Watch("tagType")
  getType() {
    if (this.tagType === "1") {
      this.init();
      // this.getSku();
    }
  }

  memberList = [];

  chooseRadio = "noUse";

  setValue = false;

  vipList = [];

  mounted() {
    this.getSku();
  }

  /** 
  获取商品已设置规格
   */
  async getSku() {
    await getAllTagsVipLevel().then((res) => {
      // this.vipList = [];
      res.data.forEach((item) => {
        this.vipList.push({
          id: null,
          productId: null,
          skuId: null,
          memberLevelId: item.rankCode,
          memberLevelName: item.rankName,
          memberPrice: null,
          memberType: this.chooseRadio === "amount" ? 0 : 1,
        });
      });
    });
    // await this.init();
  }

  /**
   * 初始化
   */
  init() {
    this.memberList = [];
    const good = this.$parent.$parent.$parent.good;
    if (good.goodDetail) {
      this.vipList.forEach((v) => {
        v.productId = good.goodDetail.id;
      });
      if (good.componentRef.formModel.limitType === 0) {
        this.memberList.push({
          originalPrice: good.componentRef.formModel.originalPrice
            ? good.componentRef.formModel.originalPrice
            : good.componentRef.formModel.skuStocks[0].originalPrice,
          price: good.componentRef.formModel.price
            ? good.componentRef.formModel.price
            : good.componentRef.formModel.skuStocks[0].price,
          vipList: this.vipList,
        });
      } else {
        const list = good.goodDetail.skuStocks as any;
        list.forEach((item) => {
          item.vipList = this.vipList;
        });
        this.memberList = JSON.parse(JSON.stringify(list));
      }
      this.memberList.forEach((m) => {
        m.vipList.forEach((v) => {
          v.skuId = m.id;
        });
      });
      return;
    }
    if (good.componentRef.formModel.limitType === 0) {
      this.memberList.push({
        originalPrice: good.componentRef.formModel.originalPrice
          ? good.componentRef.formModel.originalPrice
          : good.componentRef.formModel.skuStocks[0].originalPrice,
        price: good.componentRef.formModel.price
          ? good.componentRef.formModel.price
          : good.componentRef.formModel.skuStocks[0].price,
        vipList: this.vipList,
      });
    } else {
      // this.memberList = good.componentRef.formModel.skuStocks;
      const list = good.componentRef.formModel.skuStocks as any;
      list.forEach((item) => {
        item.vipList = this.vipList;
      });
      this.memberList = JSON.parse(JSON.stringify(list));
    }
  }

  /**
   * 修改会员方式
   */
  radioCheck() {
    this.memberList.forEach((item) => {
      item.vipList.forEach((v) => {
        v.memberType = this.chooseRadio === "percent" ? 1 : 0;
      });
    });
  }

  /**
   * 会员价输入限制
   */
  validPrice(e, index, i) {
    if (e.target.value === "0") {
      this.$message.error("会员价不能为0");
      this.memberList[index].vipList[i].memberPrice = null;
      return;
    }

    if (this.chooseRadio === "percent") {
      this.percentValid(e.target.value, index, i, 0);
      return;
    }
    if (i === 0) {
      const firstPrice = this.memberList[index].price;
      const secondPrice = this.memberList[index].vipList[i].memberPrice;
      if (Number(secondPrice) > Number(firstPrice)) {
        this.$message.error("会员价需低于实售价");
        this.memberList[index].vipList[i].memberPrice = null;
      }
    } else {
      const secondPrice = this.memberList[index].vipList[i].memberPrice;
      const firstPrice = this.memberList[index].vipList[i - 1].memberPrice;
      const afterPrice = this.memberList[index].vipList[i + 1].memberPrice;
      if (!firstPrice) {
        this.$message.error("请先输入低等级会员价");
        this.memberList[index].vipList[i].memberPrice = null;
        return;
      }
      if (Number(secondPrice) >= Number(firstPrice)) {
        this.$message.error("会员优惠输入有误");
        this.memberList[index].vipList[i].memberPrice = null;
      }
      if (Number(secondPrice) <= Number(afterPrice)) {
        this.$message.error("会员优惠输入有误");
        this.memberList[index].vipList[i].memberPrice = null;
      }
    }
  }

  /**
   * 比例验证
   */
  percentValid(value, index, i, type) {
    if (type === 0) {
      if (Number(value) >= 100) {
        this.$message.error("会员优惠比例不能大于100");
        this.memberList[index].vipList[i].memberPrice = null;
        return;
      }
      if (i !== 0) {
        const secondPrice = this.memberList[index].vipList[i].memberPrice;
        const firstPrice = this.memberList[index].vipList[i - 1].memberPrice;
        if (!firstPrice) {
          this.$message.error("请先输入低等级会员价");
          this.memberList[index].vipList[i].memberPrice = null;
          return;
        }
        if (Number(secondPrice) > Number(firstPrice)) {
          this.$message.error("会员优惠输入有误");
          this.memberList[index].vipList[i].memberPrice = null;
        }
      }
    } else {
      if (Number(value) >= 100) {
        this.$message.error("会员优惠比例不能大于100");
        this.vipList[index].memberPrice = null;
        return;
      }
      if (index !== 0) {
        const secondPrice = this.vipList[index].memberPrice;
        const firstPrice = this.vipList[index - 1].memberPrice;
        const afterPrice = this.memberList[index].vipList[i + 1].memberPrice;
        if (!firstPrice) {
          this.$message.error("请先输入低等级会员价");
          this.vipList[index].memberPrice = null;
          return;
        }
        if (Number(secondPrice) > Number(firstPrice)) {
          this.$message.error("会员优惠输入有误");
          this.vipList[index].memberPrice = null;
        }
        if (Number(secondPrice) < Number(afterPrice)) {
          this.$message.error("会员优惠输入有误");
          this.memberList[index].vipList[i].memberPrice = null;
        }
      }
    }
  }

  /**
   * 批量设置开关
   */
  control() {
    this.vipList.forEach((item) => {
      item.memberPrice = null;
    });
  }

  /**
   * 批量设置会员价格
   */
  setByAll(e, index) {
    if (!this.setValue) {
      return;
    }

    if (this.chooseRadio === "percent") {
      if (Number(e.target.value) >= 100) {
        this.$message.error("会员优惠比例不能大于100");
        this.vipList[index].memberPrice = null;
        return;
      }
    }

    if (index === 0) {
      if (this.chooseRadio !== "percent") {
        const firstPrice = this.memberList[index].price;
        const secondPrice = this.vipList[index].memberPrice;
        if (Number(secondPrice) > Number(firstPrice)) {
          this.$message.error("会员价需低于实售价");
          this.vipList[index].memberPrice = null;
          return;
        }
      }
    } else {
      const secondPrice = this.vipList[index].memberPrice;
      const firstPrice = this.vipList[index - 1].memberPrice;
      if (!firstPrice) {
        this.$message.error("请先输入低等级会员价");
        this.vipList[index].memberPrice = null;
        return;
      }
      if (Number(secondPrice) >= Number(firstPrice)) {
        this.$message.error("会员优惠输入有误");
        this.vipList[index].memberPrice = null;
        return;
      }
    }
    this.memberList.forEach((item) => {
      item.vipList.forEach((v, i) => {
        if (index === i) {
          v.memberPrice = e.target.value;
        }
      });
    });
  }
}
</script>

<style lang="scss" scoped>
@include b(fxBox) {
  margin-top: 40px;
  @include e(top) {
    display: flex;
    align-items: center;
    @include m(tip) {
      font-size: 12px;
      margin-left: 40px;
      color: #aeaeae;
    }
  }

  @include e(list) {
    margin-top: 20px;
    height: 400px;
    border: 1px solid #ebedf1;
    width: 834px;
    overflow-x: auto;
    display: -webkit-box;
    position: relative;

    @include m(firLine) {
      height: 50px;
      display: flex;
      align-items: center;
      padding-left: 25px;
      padding-right: 30px;
      background-color: #f2f4f7;
      @include m(vip) {
        width: 450px;
        display: flex;
      }
      .vipItem {
        margin-right: 46px;
        width: 80px;
        display: flex;
      }
    }

    @include m(skuLine) {
      position: absolute;
      top: 55px;
      left: 0px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      // width: 100%;
      overflow: auto;

      .skuLine {
        display: flex;
        align-items: center;
        // margin-bottom: 20px;
        // padding-bottom: 20px;
        border-bottom: 1px solid #ebedf1;
        padding-right: 33px;
        height: 70px;

        &__name {
          width: 130px;
          display: flex;
          justify-content: flex-start;
          padding-left: 25px;
        }

        &__center {
          display: flex;
          justify-content: center;
        }
      }

      .vipLine {
        display: flex;
        width: 150px;
        justify-content: center;
      }
    }
  }
}
.fxBox__list--skuLine::-webkit-scrollbar {
  display: none;
}
// .fxBox__list--firLine--vip::-webkit-scrollbar {
//   // display: none;
//   height: 2px;
//   padding-top: 5px;
// }
</style>
